<template>
  <view>
    <u-navbar
      title="套餐详情"
      title-size="36"
      height="50"
      :border-bottom="false"
      title-color="#333"
    ></u-navbar>
    <view>
      <u-tabs-swiper
        ref="uTabs"
        :list="tabsList"
        :current="current"
        @change="tabsChange"
        :is-scroll="false"
        :show-bar="false"
        active-color="#10A28F"
        swiper-width="750"
      >
      </u-tabs-swiper>
    </view>
    <swiper
      style="height: 82vh"
      :current="scurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
        <scroll-view :scroll-y="true" class="scroll-y-class">
          <view class="goods-box">
            <view class="card">
              <view class="tl">{{ item.name }}</view>
              <view class="banner">
                <u-swiper
                  :list="item.picUrls"
                  height="320"
                  border-radius="10"
                  mode="number"
                  indicator-pos="bottomRight"
                ></u-swiper>
              </view>
              <view class="price">
                <view class="priceView dis-flex flex-y-center flex-y-between">
                  <view class="goodsPrice dis-flex flex-y-center">
                    <text class="goodsPrice-tl">原价:¥</text>
                    <text class="goodsPrice-l goodsPrice-origin"
                      >{{ (item.originPrice * 0.01).toFixed(2) }}
                    </text>
                    <!-- <text class="point">20积分抵¥20</text> -->
                  </view>
                  <view class="sales">月售{{ item.salesCount }}</view>
                </view>
                <view class="dis-flex">
                  <view class="vip">
                    <text class="goodsPrice-tl">套餐价:¥</text>
                    <text class="goodsPrice-l">{{ item.priceYuan }}</text>
                  </view>
                  <view class="flex-1"></view>
                  <view
                    class="follow dis-flex flex-y-center"
                    v-if="!item.favorite"
                    @click="onFollow(item)"
                  >
                    <u-icon class="t-icon" name="/static/scsp.png" size="36"></u-icon>
                    <view style="margin-left: 5rpx">收藏</view>
                  </view>
                  <view class="follow dis-flex flex-y-center" v-else @click="onFollow">
                    <u-icon
                      class="t-icon"
                      @click="onFollow(item)"
                      name="/static/scsp_xz.png"
                      size="36"
                    ></u-icon>
                    <view style="margin-left: 5rpx">已收藏</view>
                  </view>
                </view>
                <view class="vip">
                  <text class="goodsPrice-tl">会员价:¥</text>
                  <text class="goodsPrice-l">{{ item.vipPriceYuan }}</text>
                </view>
              </view>
              <view v-if="item.giftActivities" style="margin-top: 30rpx">
                <u-line color="#C1C0C9"></u-line>
                <GiftActivity :items="item.giftActivities"></GiftActivity>
                <u-line color="#F7F7F7"></u-line>
                <view class="xz dis-flex flex-y-center">
                  <view class="xz-tl">购买须知</view>
                  <view class="xz-des">{{ item.guidanceFormat.join(' · ') }}</view>
                  <u-icon style="margin-left: 10rpx" name="/static/more.png" size="20"></u-icon>
                </view>
              </view>
            </view>
            <view v-if="item.products" style="margin-top: 20rpx">
              <u-line color="#C1C0C9"></u-line>
            </view>
            <view class="card" v-if="item.products">
              <view class="xq-tl">套餐详情</view>
              <view class="xq-list">
                <view
                  class="xq-item dis-flex flex-y-between"
                  v-for="(product, p) in item.products"
                  :key="p"
                >
                  <view class="name">{{ product.name }}</view>
                  <view class="num">×{{ product.count }}</view>
                  <view class="price-1" v-if="product.priceVisible">
                    ¥{{ (product.price * 0.01).toFixed(2) }}
                  </view>
                </view>
              </view>
            </view>
            <u-gap height="100"></u-gap>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
    <view class="fixed-wapper">
      <view class="bt-box dis-flex">
        <view @click="onGoodsBuy()" class="submit-btn btn"> 立即购买</view>
      </view>
    </view>
    <PayPopup ref="payPopupRef" @close="closePay">
      <p style="font-size: 50rpx; font-weight: 600; padding: 20rpx; text-align: center">
        ¥{{ (payPrice * 0.01).toFixed(2) }}
      </p>
    </PayPopup>
  </view>
</template>

<script>
import PayPopup from '@/components/PayPopup.vue'
import GiftActivity from '@/components/gift_activity.vue'

export default {
  components: {
    PayPopup,
    GiftActivity
  },
  data() {
    return {
      tabsList: [],
      scurrent: 0,
      current: 0,
      tabs: [],
      payPrice: '',
      resStatus: 2,
      payOrderId: ''
    }
  },
  onLoad(options) {
    this.shopId = options.shopId || ''
    this.combId = options.combId || ''
    // this.scurrent = options.type || 1
    // this.current = options.type || 1
    this.getTabList()
    // this.getCombDetail()
  },
  methods: {
    getTabList() {
      this.$u
        .get('/app-api/promotion/groupon-package/list', {
          shopId: this.shopId,
          status: 1
        })
        .then((res) => {
          let _tab = []
          res.data.forEach((item) => {
            _tab.push({
              name: item.name
            })
          })
          this.tabsList = _tab
          this.tabs = res.data
          const index = this.tabs.findIndex((group) => group.id == this.combId)
          this.scurrent = index
          this.current = index
        })
    },
    // getCombDetail(id) {
    // 	return new Promise((resolve, reject) => {
    // 		this.$u.get("/app-api/promotion/groupon-package/get", {
    // 			id: this.combId
    // 		}).then(res => {
    // 			this.tabs[this.current] = res.data
    // 			resolve(res.data)
    // 		})
    // 	})

    // },
    tabsChange(index) {
      this.scurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.scurrent = e.detail.current
      this.current = e.detail.current
      this.$refs.uTabs.setFinishCurrent(this.scurrent)
      this.combId = this.tabs[this.current].id
      // this.getCombDetail()
    },
    closePay() {
      uni.redirectTo({
        url: '/goods/order-list/order-list?status=clerk'
      })
    },
    onGoodsBuy() {
      let items = []

      // console.log(this.tabs[this.current])
      items.push({
        skuId: this.skuId,
        count: 1
      })
      this.$utils.route({
        url: '/goods/order-confirm/comb-order-confirm',
        params: {
          grouponPackageId: this.combId
        }
      })

      return
      let form = {
        deliveryType: 4,
        grouponPackageId: this.combId,
        useCryptocurrencyDeduction: false
      }
      this.payPrice = this.tabs[this.current].vipPrice
      this.$u.api.setOrderCreate(form).then((res) => {
        if (res.code != 0) {
          this.$u.toast(res.msg)
          return
        }
        this.payOrderId = res.data.tradeNo
        this.$refs.payPopupRef.open(this.payOrderId, '', res.data.price === 0)
      })
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    onFollow(item) {
      let that = this
      this.$u
        .post('/app-api/promotion/groupon-package/favorite/toggle', {
          packageId: item.id
        })
        .then((res) => {
          that.getTabList()
        })
    }
  }
}
</script>

<style lang="scss">
@import url('@/style/btn.css');

page {
  background-color: #f7f7f7;
}

.fixed-wapper {
  background-color: #fff;
  width: 100%;
  left: 0;

  .bt-box {
    height: 90rpx;
    padding-left: 4%;
    box-shadow: -1rpx -1rpx 2px 0px #eeeeef;
  }

  .submit-btn {
    height: 70rpx;
    flex: 1;
    line-height: 70rpx;
    left: 4%;
    margin-top: 10rpx;
    margin-right: 4%;
  }

  .follow {
    font-size: 24rpx;
    color: #333333;

    .t-icon {
      margin-right: 10rpx;
    }
  }
}

.swiper-item {
  width: 100%;
  height: 100%;
}

.scroll-y-class {
  height: 100%;
  width: 100%;
}

.card {
  padding: 30rpx 20rpx;
  background: #ffffff;
  border-radius: 10rpx;
}

.goods-box {
  padding: 20rpx;

  .tl {
    margin-bottom: 30rpx;
    font-size: 30rpx;
    color: #333333;
  }

  .price {
    margin-top: 30rpx;

    .goodsPrice-tl {
      font-size: 26rpx;
    }

    .goodsPrice-l {
      font-size: 32rpx;
    }

    .goodsPrice-origin {
      text-decoration: line-through;
    }

    .point {
      font-size: 24rpx;
      color: #ff6f10;
      margin-left: 20rpx;
    }

    .sales {
      font-size: 26rpx;
      color: #666666;
    }

    .vip {
      color: #fa453c;
      margin: 10rpx 0;
    }
  }

  .xq-tl {
    font-size: 30rpx;
    color: #333333;
    margin-bottom: 30rpx;
  }

  .xq-list {
    .xq-item {
      margin-bottom: 10rpx;

      .name {
        font-size: 26rpx;
        color: #333333;
        width: 60%;
      }

      .num {
        color: #999999;
        font-size: 26rpx;
      }

      .price-1 {
        color: #333333;
        font-size: 26rpx;
      }
    }
  }
}

.xz {
  font-size: 28rpx;
  color: #333333;

  .xz-des {
    font-size: 24rpx;
    color: #666666;
    margin-left: 20rpx;
  }
}
</style>
